<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        #result {
            width: 300px;
            height: 200px;
            border: solid 1px rgb(161, 161, 161);
            margin: 5px 0;
        }
    </style>
    <button id="btn1">点击发送GET请求</button>
    <button id="btn2">点击发送POST请求</button>
    <div id="result"></div>


    <script src="../../js/jquery.3.5.1.js"></script>
    <script>
        $("#btn2").click(function () {
            // 原生ajax的几个步骤
            /* 
            1、创建对象
            2、初始化  ：设置请求方法和url
            3、发送
            4、事件绑定，处理服务端返回的结果
            */
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 2、初始化  ：设置请求方法和url
            // 若想传递参数，则在下面的url后面添加即可，使用相关符号：?  &  = 
            xhr.open("POST", "http://127.0.0.1:8088/serverPOST")

            // 2.1 设置请求头
            // setRequestHeader() 方法接受两个参数，第一个为请求头的名字，第二个为对应的值
            // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            // xhr.setRequestHeader("name", "urlencoded")

            // 3、发送，并设置请求体，有默认的几种方式，说白了，就是客户端和服务端之间定义好的一种处理规则，
            // 不管你写的是什么样的请求体，只要符合提前设定好的解析规则，
            // 能正确的解析即可，不在乎形式。不过还是按照常见的约定成俗的规则就好了
            xhr.send("a=100&b=200&c=300");
            // xhr.send("a:100&b:200&c:300");
            // xhr.send("3212");

            // 4、事件绑定，处理服务端返回的结果
            // on 有when的意思，表示当。。。。的时候
            // readystate 是xhr对象中的属性，表示状态，有0,1,2,3,4 这五个值，每一次状态改变，都会调用一次onreadystatechange方法
            xhr.onreadystatechange = function () {
                // 判断（服务端发会了所有的结果)
                if (xhr.readyState === 4) {
                    //  判断响应状态码  200  404   403   401   500
                    //  2xxx  表示成功
                    if (xhr.status >= 200 && xhr.status <= 300) {

                        $("#result").html(xhr.response);
                    }
                }
            }

        })
        $("#btn1").click(function () {
            // 原生ajax的几个步骤
            /* 
            1、创建对象
            2、初始化  ：设置请求方法和url
            3、发送
            4、事件绑定，处理服务端返回的结果
            */
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // xhr.responseType = "json"
            // xhr.responseType = "text"
            // xhr.responseType = "document"
            // xhr.responseType = "blob"
            // xhr.responseType = "arraybuffer"


            xhr.timeout = 3000  // 超时设置为3s
            // 超时后触发的回调函数
            xhr.ontimeout = function () {
                console.log("响应时间：超时为3s")
            }

            xhr.onerror = function () {
                console.log("发生网络异常")
            }


            // 2、初始化  ：设置请求方法和url
            // 若想传递参数，则在下面的url后面添加即可，使用相关符号：?  &  = 
            xhr.open("GET", "http://127.0.0.1:8088/server")
            // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            // xhr.setRequestHeader("name", "urlencoded")



            // 3、发送
            xhr.send();
            // 4、事件绑定，处理服务端返回的结果
            // on 有when的意思，表示当。。。。的时候
            // readystate 是xhr对象中的属性，表示状态，有0,1,2,3,4 这五个值，每一次状态改变，都会调用一次onreadystatechange方法
            xhr.onreadystatechange = function () {
                // 判断（服务端发会了所有的结果)
                if (xhr.readyState === 4) {
                    //  判断响应状态码  200  404   403   401   500
                    //  2xxx  表示成功
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        $("#result").html(xhr.response);

                    }
                }
            }

            // 取消请求
            // xhr.abort();
        })


        //  标识变量
        var isSending = false;
        $("#btn3").click(function () {
            let xhr = new XMLHttpRequest();
            if (isSending) xhr.abort();   // 如果正在发生，则取消请求，创建一个新的请求
            isSending = true;   // 改变标识变量
            xhr.open("GET", "http://127.0.0.1:8088/server")
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        $("#result").html(xhr.response);

                        isSending = false;// 改变标识变量
                    }
                }
            }

            // 假设有一个按钮，用来点击即可取消请求
            $("#exit").click(function () {
                xhr.abort();	// 取消请求
            })
        })
    </script>
</body>

</html>